<template>
	<view>
		<button @tap="open">打开</button>
        <TridentRegionPicker
			ref="regionRef"
			:regionList="regionList"
			:column="column"
			:default-value="defaultValue"
			:mask-close-able="maskCloseAble"
			:visible="visible"
			@confirm="confirm"
			@cancel="cancel"
		/>
        <view>{{str}}</view>
	</view>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { onShow } from "@dcloudio/uni-app"
import { useCommonStore } from '@/stores'
import type { RegionTree } from '@/types/common'

const regionRef = ref()
const visible = ref(false)
const maskCloseAble = ref(true)
const str = ref('')
const column = ref(3)
// const defaultValue = ref<number[]>([2, 52, 500])
const defaultValue = ref<number[]>([25, 321, 2703])
// const defaultValue = ref<number[]>([4, 58, 563])
const commonStore = useCommonStore()
const regionList = ref<RegionTree[]>([])

onShow(async () => {
    await getRegions()
	
	regionRef.value.init()
})

// --------------- 获取地区数据开始 ---------------
const getRegions = async () => {
    regionList.value = await commonStore.getRegionTree()
}
// --------------- 获取地区数据结束 ---------------

const open = () => {
	visible.value = true
}

const confirm = (val: any) => {
	console.log(val)
	str.value = JSON.stringify(val)
	visible.value = false
}

const cancel = () => {
	visible.value = false;
}

</script>